/* 学习目标：组件通信-子传父 */

import { useState } from 'react';

export default function App() {
  const [count, setCount] = useState(99);

  // 1. 父组件定义修改数据（花钱）的回调函数
  const handleCost = (num) => {
    console.log('num  ----->  ', num);
    setCount(count - num);
  };

  return (
    <div>
      <button onClick={() => setCount(count + 1000)}>++</button>
      App - {count}
      <hr />
      <Child
        count={count}
        // 2. 💥父传子，传回调给子组件
        handleCost={handleCost}
      />
    </div>
  );
}
// 3. 子组件，通过props接收回调
function Child({ count, handleCost }) {
  console.log('handleCost  ----->  ', handleCost);
  return (
    <div>
      <h2>我是子组件 - {count}</h2>
      <button
        // 4. 💥子组件，调用回调
        onClick={() => handleCost(3000)}
      >
        吞金兽想花钱
      </button>
    </div>
  );
}
